<template>
  <div class="selective-container">
    <div class="homeHeader">
      <h1 class="title">
        贵州省疫情精准防控大数据综合管理平台
      </h1>
    </div>

    <!-- 子系统 -->
    <div class="content">
      <el-carousel
        :initial-index='activeItem'
        arrow="always"
        :autoplay="false"
        indicator-position="none"
        ref="carousel"
        :interval="4000" 
        type="card" 
        height="300px"
        @change="change">
        <el-carousel-item v-for="(item,index) in carousel" :key="index">
          <div class="item" @click="goTo(item.router)">
            <img :src="activeItem==index?item.selectedImg:item.defaultImg" alt="">
            <img :src="item.icon" alt="">
            <h3 class="medium" :class="activeItem==index?'selected':''">{{item.title}}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <img src="../assets/home_left.png" alt="">
      <img src="../assets/home_right.png" alt=""> -->
      <!-- <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
        <el-carousel-item v-show="false">
        </el-carousel-item>
      </el-carousel> -->


    <div>
    <!-- 下标 -->
  <ul class="carousel-indicator" @click.stop="chooseCard(index)">
    <li :class="activeItem==index?'selected':''" @click.stop="chooseCard(index)" v-for="(item,index) in indicator" :key="index">
      <p>{{item.title}}</p>
      <img v-show="activeItem==index" src="../assets/home_6.png" alt="">
    </li>
  </ul>
  </div>
    </div>
  </div>
</template>

<script>
import * as token from '@/utils/auth.js';
import { healthyPlaUrl } from '@/http/apiUrls.js';
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      carousel:[  //  子系统数据
        // {title:"一场三站疫情防控系统",defaultImg:require("@/assets/home_3.png"),selectedImg:require("@/assets/home_4.png"),icon:require("@/assets/home_zhongduan.png"),router:"healthy"},
        {title:"场所码管理系统",defaultImg:require("@/assets/home_3.png"),selectedImg:require("@/assets/home_4.png"),icon:require("@/assets/home_changsuo.png"),router:"/csm"},
        {title:"防控管理系统",defaultImg:require("@/assets/home_3.png"),selectedImg:require("@/assets/home_4.png"),icon:require("@/assets/home_fangkong.png"),router:"/fk"},
        {title:"平台管理系统",defaultImg:require("@/assets/home_3.png"),selectedImg:require("@/assets/home_4.png"),icon:require("@/assets/home_pingtai.png"),router:"/pla"},
      ],
      indicator:[    //下标数据
        // {title:"一场三站疫情防控系统"},
        {title:"场所码管理系统"},
        {title:"防控管理系统"},
        {title:"平台管理系统"},
      ],
      activeItem:1,  //当前选中走马灯下标
    };
  },
  created(){
  },
  methods:{
    change: function(e){
      this.activeItem = Number(e);
    },
    goTo(val){
      if(val==="healthy"){
        const tokenStr = token.get()
        let url = healthyPlaUrl+"?accessToken="+tokenStr;
        console.log(url);
        location.href = url
        return;
      }else{
        this.$router.replace(val);
      }
      
    },
    chooseCard(index){
      this.$refs.carousel.setActiveItem(index);
    },
  }
}
</script>
<style lang="scss" scoped>
  .selective-container {
    user-select: none;
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: url(../assets/home_1.png) no-repeat;
    background-size: 100% 100%;
    .homeHeader {
      margin: 0 auto 0;
      padding: 40px 0 0;
      color: #fff;
      letter-spacing: 3px;
      text-align: center;
      width: fit-content;
      .title {
        line-height:74px;
        margin: 10px 0;
        background:url(../assets/home_2.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    .content {
      overflow:hidden;
      height:calc(100% - 300px);
      padding: 0 50px;
      margin-top: 10%;
      .el-carousel__container{
        text-align: center;
      }
      // .el-carousel__item {
      //   // background:#90f;
      // }
      .el-carousel__item .item {
        margin: 0 auto;
        cursor: pointer;
        width: fit-content;
        position: relative;
      }
      .el-carousel__item .item h3 {
        margin: 10px 0 0;
        padding: 0;
        line-height: 50px;
        color: #fff;
        letter-spacing:2px;
        font-size: 24px;
      }
      .el-carousel__item .item h3.selected {
        font-size:28px;
        background:url(../assets/home_7.png) bottom no-repeat;
        background-size: 100% 100%;
      }
      .el-carousel__item .item img:nth-child(2){
        width: 50px;
        height: 50px;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%,-20%);
      }
      .el-carousel__item.el-carousel__item--card{
        text-align: center;
      }
      .el-carousel__item--card.is-in-stage{
        cursor:default;
      }
      ::v-deep .el-carousel__mask{
        background-color: transparent;
      }
      // 指示器
      .carousel-indicator {
        list-style-type: none;
        display: flex;
        justify-content:center;
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        li {
          cursor: pointer;
          text-align: center;
          margin:0 10px;
          color: #fff;
          width: 200px;
          position: relative;
          p {
            line-height: 40px;
            background:url(../assets/home_5.png) no-repeat;
            background-size: 100% 100%;
          }
          img {
            position: absolute;
            bottom: 0;
            left:50%;
            transform: translateX(-50%);
          }
        }
        li.selected p{
          content: "";
          display: block;
          background:url(../assets/home_7.png) bottom no-repeat;
          background-size: 100% 100%;
        }
      }
      // 左右按钮
      ::v-deep.el-carousel__arrow{
        i {
          display: none;
        }
      }
      ::v-deep.el-carousel__arrow.el-carousel__arrow--left{
          background: url(../assets/home_left.png) no-repeat;
      }
      ::v-deep.el-carousel__arrow.el-carousel__arrow--right{
          background: url(../assets/home_right.png) no-repeat;
      }
    }
  }
</style>
